<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的招聘数据</title>
    <!-- vue -->
    <script src="../common/js/vue2.js"></script>
    <!-- 引入http-vue-loader -->
    <script src="../common/js/vueLoader.js"></script>
    <!-- 引入样式vant -->
    <script src="../common/ui/vant-ui/ui.js"></script>
    <!-- 引入echar -->
    <script src="
https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js
"></script>
  </head>
  <body>
    <div id="app" class="">
      <main-top></main-top>
      <div class="mainCenter">
        <div class="leftContent">
          <div class="jbbgc cf">
            <top title="招聘数据中心"></top>
            <div class="pd20">
              <div class="fwb fs24">我的招聘数据</div>
              <div class="mtag mgt20">
                <van-icon name="video-o" @click="showChart=true" />
                周数据
                <span class="c9"><van-icon name="arrow" /></span>
              </div>
            </div>
          </div>
          <div class="main">
            <div class="flex jcsb aic">
              <div>
                <div>
                  <span class="mgr8">今日数据</span
                  ><span><van-icon name="exchange" /></span>
                </div>
              </div>
              <div class="stag fs12" @click="showJob=true">
                网站开发前端vue<van-icon name="exchange" size="8" />
              </div>
            </div>
            <!-- 数据模块 -->
            <div class="mokuai">
              <div v-for="i in mySnum">
                <div class="ccard">
                  <div class="fs12">{{ i.name }}</div>
                  <div class="flex jcsb aic">
                    <div class="fs18">
                      {{ i.num }} <span class="fs10">人</span>
                    </div>
                    <div class="fs10">
                      <span class="c9">较昨日</span>
                      <span class="fwb fs12" :class="i.isup?'prColor':'cr'"
                        >{{ i.after }}</span
                      ><van-icon name="arrow" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="fwb mgt10">今日权益使用量</div>
            <div class="ccard">
              <div class="fs12">
                <span class="mgr8"><van-icon name="closed-eye" /></span>查看
              </div>
              <div class="fs12 mgt20 flex aic">
                <span>账号权益</span>
                <span class="line f1"></span>
                <span><b class="prColor">0</b>/<b class="fwb">不限</b></span>
              </div>
            </div>
            <div class="ccard"></div>
          </div>
          <van-popup v-model="showChart" class="w100" :position="position" round>
            <div>
              <div class="close" @click="showChart=false">
                <van-icon name="cross" />
              </div>
              <chart :chartdata="chartData" :titlemsg="titleMsg"></chart>
            </div>
          </van-popup>
          <van-popup v-model="showJob" class="w100" :position="position" round>
            <div class="pd20 c0 jobBox">
              <div class="flex jcsb">
                <div class="fwb">选择职位</div>
                <div class="fwb" @click="showJob=false">
                  <van-icon name="cross" />
                </div>
              </div>
              <div v-for="(i,index) in jobList" class="mgt20">
                <div class="van-hairline--bottom flex" @click="active=index">
                  <van-cell value="1">
                    <span :class="active==index?'prColor':'c0'"
                      >{{ i.name }}</span
                    >
                    <span
                      class="pu"
                      v-if="i.isP"
                      :class="active==index?'puactive':''"
                      >普</span
                    >
                    <template #right-icon>
                      <van-icon
                        name="success"
                        v-if="active==index"
                        class="prColor fwb"
                        size="19"
                      />
                    </template>
                  </van-cell>
                </div>
              </div>
            </div>
          </van-popup>
        </div>
        <lan-adright></lan-adright>
      </div>
    </div>
  </body>
</html>
<style>
  body {
    background-color: #c5b9b92c;
  }
  .mtag {
    padding: 8px 10px;
    font-size: 0.7rem;
    color: #000;
    background-color: #fff;
  }
  .stag {
    background-color: #fff;
    color: #000;
    padding: 5px;
    font-weight: bold;
    margin-right: 20px;
  }
  .main {
    padding: 25px 10px;
    border-radius: 10px;
    transform: translate(0, -5px);
    color: #000;

    /* max-width: 360px; */
  }
  .ccard {
    margin: 8px;
    padding: 15px 10px;
    min-width: 120px;
    border-radius: 12px;
    background-color: #fff;
  }
  .line {
    height: 5px;
    margin: 0 20px;
    background-color: #bbb7b7;
    border-radius: 5px;
  }
  .mokuai {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(20px, auto);
    grid-auto-flow: dense;
  }
  .jobBox {
    min-height: 500px;
  }
  .pu {
    padding: 1px;
    font-size: 0.7rem;
    border-radius: 4px;
    margin-left: 3px;
    border: 2px solid #000;
  }
  .puactive {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
  }
  .close {
    position: absolute;
    right: 30px;
    top: 20px;
    color: #000;
    font-weight: bold;
  }
  @media (min-width:500px){
    .w100{
      width: 900px !important;
    }
  }
</style>
<script>
  Vue.use(httpVueLoader);
  new Vue({
    el: "#app",
    data: {
      mySnum: [
        { name: "我看过", num: 0, after: "-5", isup: false },
        { name: "看过我", num: 0, after: "-3", isup: false },
        { name: "我打招呼", num: 0, after: "-1", isup: false },
        { name: "牛人新招呼", num: 0, after: "+0", isup: true },
        { name: "我沟通", num: 0, after: "+0", isup: true },
        { name: "收获简历", num: 0, after: "-1", isup: false },
        { name: "交换电话微信", num: 0, after: "+0", isup: true },
        { name: "接受面试", num: 0, after: "+0", isup: true },
      ],
      showChart: false,
      showJob: false,
      jobList: [
        { name: "全部职位" },
        { name: "网站开发前端vue 2-3k", isP: true },
      ],
      active: 0,
      titleMsg: {
        title: "近期数据·牛人新招呼",
        time: "2023.10.09",
        tag: "牛人新招呼",
      },
      chartData: [1, 3, 2, 1, 1, 2, 1, 4],
      position:'bottom',
    },
    created(){
      var windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
      if(windowWidth>500){
        this.position = 'center';
      }else{
        this.position = 'bottom';
      }
    },
    components: {
      top: httpVueLoader("../common/commpent/top.vue"),
      chart: httpVueLoader("../common/commpent/chart.vue"),
      "main-top": httpVueLoader("../common/commpent/main/workTop.vue"),
      "main-footer": httpVueLoader("../common/commpent/main/mainFooter.vue"),
      "lan-adright": httpVueLoader("../common/commpent/lan/adRight.vue"),
    },
    methods: {},
  });
</script>
